import React, {Component} from 'react';
import {Form, Icon, Input, Button, Checkbox, Row, Col, message} from 'antd';
import {connect} from '../../utils/decorator';
import {login} from '../../utils';
import style from './style.less';
import Setting from '../../components/Setting';
import {Base64} from 'js-base64';

const FormItem = Form.Item;

@connect
@Form.create()
class Login extends Component {

    state = {
        loading:false
    }

    showMessage = (msg)=>{
        message.error(typeof msg === 'string' ? msg : '系统异常，请重试')
        this.setState({
            loading:false
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                let {password, username} = values;
                password = Base64.encode(password.trim())
                username = username.trim()
                this.request.get('findUserAppStatus', {
                    username
                }).then(res => {
                    if(res.result === 'success'){
                        //没有审核
                        if((res.hasrecord == true || res.hasrecord == 'true') && res.status == 0){
                            return Promise.reject('该账号暂未通过审核')
                        }
                        else{
                            login({password, username}, true).then((users) => {
                                this.props.dispatch({
                                    type:'user/change',
                                    data:{
                                        users
                                    }
                                })
                                location.hash = '/'
                            })
                            .catch((err) => {
                                this.showMessage(err)
                            })
                        }
                    }
                    else{
                        return Promise.reject('系统异常，请重试')
                    }
                }).catch(err => {
                    this.showMessage(err)
                })
            }
        })
    }

    render(){
        const {getFieldDecorator} = this.props.form;
        const {loading} = this.state;
        return (
            <Form onSubmit={this.handleSubmit} className={style.form}>
                <Row className={style.top} type="flex" justify="end">
                    <Col>
                        <Setting />
                    </Col>
                </Row>
                <div className={style.head}>
                    <h3>登录云记账助手</h3>
                    <p>仅支持代账用户</p>
                </div>
                <FormItem>
                    {getFieldDecorator('username', {
                        rules:[{
                            required:true, 
                            message:'请输入用户名' 
                        }]
                    })(
                        <Input prefix={<Icon type="user" />} placeholder="请输入用户名" autoComplete="off" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules:[{
                            required:true, 
                            message:'请输入密码' 
                        }]
                    })(
                        <Input type="password" prefix={<Icon type="lock" />} placeholder="请输入密码" autoComplete="off" />
                    )}
                </FormItem>
                <Row type="flex" justify="space-between">
                    <Col>
                        <FormItem style={{margin:'-10px 0 8px'}}>
                            {getFieldDecorator('remember', {
                                valuePropName:'checked',
                                initialValue:true
                            })(
                                <Checkbox>记住账号</Checkbox>
                            )}
                        </FormItem>
                    </Col>
                    <Col>
                        <a>忘记密码？</a>
                    </Col>
                </Row>
                <div>
                    <Button type="primary" htmlType="submit" block loading={loading}>
                        登录
                    </Button>
                </div>
            </Form>
        )
    }
}

export default Login